<template>
	<view class="container">
		<!-- <u-navbar leftIconSize="0" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="我的" bgColor="transparent" :autoBack="false"></u-navbar> -->
		<view class="pdx-28">
			<view class="user flex ai_center">
				<image class="user-avatar" :src="userInfo.avatar"></image>
				<view class="user-name">{{userInfo.nickname}}</view>
			</view>
			<view class="balance">
				<image class="balance-bg" src="/static/image/bg2.png"></image>
				<view class="balance-content flex ai_center jc_between">
					<view>
						<view class="balance-title">算力余额</view>
						<view class="balance-value" @click="jump('/pages/powerRecord/powerRecord')">{{userInfo.money}}</view>
					</view>
					<view class="balance-btn" @click="jump('/pages/recharge/recharge')">充值</view>
				</view>
			</view>
		</view>
		<view class="bg-white pdx-28 mgt-46">
			<view class="flex jc_between pdy-40">
				<view class="">进行中的队列</view>
				<view class="text-24 flex ai_center text-999" @click="jump('/pages/queue/queue')">查看更多 <u-icon name="arrow-right" color="#999999" size="24"></u-icon></view>
			</view>
			<view class="list-item bg-f6f7f9" v-if="orderInfo">
				<view class="item-header flex jc_between ai_center">
					<view class="item-title">{{orderInfo.tool}}</view>
					<!-- <view class="item-btn">取消排队</view> -->
				</view>
				<view class="item-content flex ">
					<!-- <view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{orderInfo.sorted}}</view>
						<view class="item-col-label">排队</view>
					</view> -->
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{orderInfo.cost}}</view>
						<view class="item-col-label">算力消耗</view>
					</view>
					<view class="item-col flex1 flex fd_c ai_center jc_center">
						<view class="item-col-value">{{orderInfo.style}}</view>
						<view class="item-col-label">风格</view>
					</view>
				</view>
			</view>
			<view class="bg-f6f7f9 flex fd_c ai_center jc_center pdt-56 pdb-46" v-else>
				<image class="w-210 h-165" src="/static/image/noData.png"></image>
				<view class="text-24 mgt-20">暂无执行中的队列信息</view>
			</view>
			<view class="flex jc_between pdy-40">
				<view class="">服务</view>
			</view>
			<view class="pdx-24 flex">
				<view class="flex fd_c ai_center jc_center mgr-32" @click="jump('/pages/creator/creator')">
					<image class="w-90 h-90" src="/static/image/creator.png"></image>
					<view class="text-24 mgt-20">创作者中心</view>
				</view>
				<view class="flex fd_c ai_center jc_center mgr-32" @click="jump('/pages/share/share')">
					<image class="w-90 h-90" src="/static/image/share.png"></image>
					<view class="text-24 mgt-20">分享拉新</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				userInfo:{},
				orderInfo:null
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo(){
				this.get('user/index').then(res=>{
					this.userInfo = res.data.user
					this.orderInfo = res.data.order
					if(this.orderInfo){
						setTimeout(()=>{
							this.getUserInfo()
						},1000)
					}
				})
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-f6f7f9{
		background:#f6f7f9;
	}
	.w-210{
		width:210rpx;
	}
	.h-165{
		height: 165rpx;
	}
	.pdt-56{
		padding-top: 56rpx;
	}
	.pdb-46{
		padding-bottom: 46rpx;
	}
	.list-item{
		margin-bottom: 28rpx;
		border-radius: 20rpx;
		padding:0 0 4rpx;
		.item-header{
			height: 94rpx;
			border-bottom: 1px solid #D9D9D9;
			padding:0 22rpx;
			font-size: 24rpx;
		}
		.item-btn{
			padding:0 20rpx;
			height: 52rpx;
			border-radius: 26rpx;
			border:1px solid #333333;
			line-height: 48rpx;
			min-width: 136rpx;
			text-align: center;
		}
		.item-content{
			padding:56rpx 0 52rpx;
			.item-col:nth-child(2){
				border-left: 1px solid #D9D9D9;
				border-right: 1px solid #D9D9D9;
			}
			.item-col-label{
				font-size: 24rpx;
				margin-top: 20rpx;
			}
			.item-col-value{
				font-size: 40rpx;
				font-weight: bold;
			}
		}
	}
	.container{
		min-height: 100vh;
		background-image: url('@/static/image/bg.png');
		background-size: 100% auto;
		padding:28rpx 0;
		.user{
			padding:10rpx 0 46rpx;
			&-avatar{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 32rpx;
				background-color: #cccccc;
			}
			&-name{
				font-size: 32rpx;
			}
		}
		.balance{
			height: 152rpx;
			position: relative;
			&-bg{
				width: 100%;
				height: 100%;
				display: block;
			}
			&-content{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				padding:0 28rpx;
				.balance-title{
					font-size: 24rpx;
					color: #D3BD98;
				}
				.balance-value{
					color: #D3BD98;
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 30rpx;
				}
				.balance-btn{
					width: 128rpx;
					height: 54rpx;
					background: linear-gradient(270deg, #21FFE7 0%, #88FEC8 100%);
					border-radius: 27rpx;
					text-align: center;
					line-height: 54rpx;
					color: #215139;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
